<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link type="text/css" href="css/mypage.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/elastislide.css" /><!-- 슬라이더 기능 -->
<script src="js/modernizr.custom.17475.js"></script><!-- 슬라이더 기능 -->
<div id="contents">
	<%@ include file="../tiles/mypagemn.jspf" %><!-- nav 메뉴 -->
	<ul id="loca">
		<li><a href="">홈</a>&nbsp;&gt;</li>
		<li>Mypage</li>
	</ul>
	<div id="mypage" class="clearf">
		<ul>
			<li class="mypagebox">
				<div class="mypagebox1">
					<h2>
						예매 정보
					</h2>
				</div>
				<table>
					<colgroup>
						<col style="width:12%" />
						<col style="width:20%" />
						<col style="width:20%" />
						<col style="width:8%"  />
						<col style="width:10%" />
						<col style="width:10%" />
						<col style="width:10%" />
					</colgroup>
					
					<tr>
						<th>예매번호</th><th>제목</th><th>영화관</th><th>매수</th>
						<th>상영시간</th><th>예매 완료 여부</th><th>상세정보</th>
					</tr>
					<c:forEach var="rv" items="${ reservationinfo }" > 
					<tr>
						<th>${ rv.rno }</th><th>${rv.title }</th><th>${rv.cinename }</th><th>${rv.people }</th>
						<th>${rv.runningtime }</th><th>예매 완료</th><th><a href="rsrv_info.bi?rno=${rv.rno }" id="infobtn">상세정보</a></th>
					</tr>
					</c:forEach> 
					<%-- rsrv_info.bi?rno=${rv.rno } --%>
				</table>
			</li> <!-- 예매정보 -->
			
			<li class="mypagebox">
				<div class="mypagebox1">
					<h2>
						추천 무비 차트
					</h2>
				</div>
				<div id="container">
					<div class="main">
						<ul id="carousel" class="elastislide-list">
							<c:forEach var="mv" items="${ movielist }" >
							<li><a href="#"><img src="images/mypageslide/${ mv.movno }.jpg" alt="image01" /></a></li>
							</c:forEach>
						</ul>
					</div>
				</div>
			</li> <!-- 추천 무비 차트 -->
			
			<li class="mypagebox" id="theater">
				<div class="mypagebox1"  >
					<h2>
						주변 영화관
					</h2>
				</div>
				<div id="selecttheater" >
					<img src="images/map/map1.png" alt="map1" usemap="#mapseoul" id="map1">
					<map id="mapseoul">
						<area alt="" shape="rect" coords="445,200,490,207" href="mov.bi" target="_blank">
						<area alt="" shape="rect" coords="480,153,530,165" href="mov.bi" target="_blank">
					</map>
					
					<select id="selectbox" onchange="Change(this.value,this.selectedIndex)">
							<option value="0">서울</option><option value="1">경기</option>
							<option value="3">인천</option><option value="4">부산</option>
							<option value="5">울산</option><option value="6">대구</option>
							<option value="7">대전</option><option value="8">광주</option>
							<option value="9">강원</option><option value="10">경남</option>
							<option value="11">경북</option><option value="12">전라</option>
							<option value="13">충청</option><option value="14">제주</option>
					</select> 
				</div>
			</li>
		</ul>
		
	</div><!-- mypage-->
	

</div><!-- contents -->
<script src="js/jquery1.10.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquerypp.custom.js"></script>
		<script type="text/javascript" src="js/jquery.elastislide.js"></script>
		<script type="text/javascript">
			$( '#carousel' ).elastislide();
</script>
<script>
	
		function Change(value,value2)
		{
		//선택한 셀렉트 박스의 인덱스 번호에 따른 이미지 주소 선택
		 switch(value2)
		 {
		  case 0 : imgsrc = "images/map/map1.png"; break;
		  case 1 : imgsrc = "images/map/map2.png"; break;
		  case 2 : imgsrc = "images/map/map3.png"; break;
		  case 3 : imgsrc = "images/map/map4.png"; break;
		  case 4 : imgsrc = "images/map/map5.png"; break;
		  case 5 : imgsrc = "images/map/map6.png"; break;
		  case 6 : imgsrc = "images/map/map7.png"; break;
		  case 7 : imgsrc = "images/map/map8.png"; break;
		  case 8 : imgsrc = "images/map/map9.png"; break;
		  case 9 : imgsrc = "images/map/map10.png"; break;
		  case 10 : imgsrc = "images/map/map11.png"; break;
		  case 11 : imgsrc = "images/map/map12.png"; break;
		  case 12 : imgsrc = "images/map/map13.png"; break;
		  default : imgsrc = "images/map/map14.png"; // 셀렉트 박스 값이 없을때...
		 }
		 document.all.map1.src=imgsrc;//이미지 주소 바꺼서 이미지 바꾸기
		}
		
</script>


